<style lang="scss">
  .gdxx-div {
    outline: 1px dotted #cccccc;
    padding: 7px 0;
    margin-top: 7px;
    .repeat-div {
      border-bottom: 1px dotted #cccccc;
    }
    .cl-title {
      height: 36px;
      line-height: 36px;
      text-align: center;
      font-size: 16px;
      font-weight: bold;
    }
    .form-label input {
      background-color: #ffffff !important;
      border: #ffffff !important;
      padding-left: 0px !important;
    }
    .gdxx-file {
      a {
        text-decoration: none;
        color: #308ee5;
        padding-right: 36px;
      }
      .file-btn {
        color: #308ee5;
        text-decoration: underline;
        padding: 0 4px;
        cursor: pointer;
      }
      .file-btn:hover {
        color: blue;
      }
    }
    .rmw-file-div {
      .el-upload {
        width: 100%;
        .el-upload-dragger {
          width: 100%;
          height: 80px;
          .el-icon-upload {
            float: left;
            margin: 0 44px 0 144px;
            line-height: 80px;
          }
          .el-upload__text {
            height: 80px;
            line-height: 80px;
            text-align: left;
          }
        }
      }
    }
  }
  .btn-div {
    margin: 20px 0;
    text-align: center;
  }
</style>

<template>
  <el-form :model="formInitData"
           ref="formInitData"
           label-width="80px"
           v-loading="loadingPage">
    <!-- 公众信箱-公众工单 -->
    <div class="gdxx-div"
         v-if="showGzxxDiv">
      <div class="repeat-div"
           v-for="item in formInitData.gdInfoEntityList"
           :key="item.code">
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="工单编号：">
              <p size="small"
                 disabled>{{item.code}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="来电(信)人：">
              <p size="small"
                 disabled>{{item.income}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="联系人电话：">
              <p size="small"
                 disabled>{{item.telphone}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系人邮箱：">
              <p size="small">{{item.email}}</p>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="系统来源：">
            <p size="small">{{formInitData.sourceName}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="信件标题：">
            <p size="small">{{formInitData.gdInfoEntityList[0].title}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="信件内容：">
            <p size="small">{{formInitData.gdInfoEntityList[0].content}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="转办说明：">
            <p size="small">{{formInitData.gdInfoEntityList[0].instruction}}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 大联动-事件工单 -->
    <div class="gdxx-div"
         v-if="showDldDiv">
      <div class="repeat-div"
           v-for="item in formInitData.gdInfoEntityList"
           :key="item.code">
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="工单编号：">
              <p size="small"
                 disabled>{{item.code}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="来电(信)人：">
              <p size="small"
                 disabled>{{item.income}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="联系人电话：">
              <p size="small"
                 disabled>{{item.telphone}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系人邮箱：">
              <p size="small">{{item.email}}</p>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="系统来源：">
            <p size="small">{{formInitData.sourceName}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="内容：">
            <p size="small">{{formInitData.gdInfoEntityList[0].content}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="办理要求：">
            <p size="small">{{formInitData.gdInfoEntityList[0].instruction}}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 市长信箱-电话工单\信件工单\信箱工单 -->
    <div class="gdxx-div"
         v-if="showSzxxDiv">
      <div class="repeat-div"
           v-for="item in formInitData.gdInfoEntityList"
           :key="item.code">
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="工单编号：">
              <p size="small"
                 disabled>{{item.code}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="来电(信)人：">
              <p size="small"
                 disabled>{{item.income}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="联系人电话：">
              <p size="small"
                 disabled>{{item.telphone}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系人邮箱：">
              <p size="small">{{item.email}}</p>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="系统来源：">
            <p size="small">{{formInitData.sourceName}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="主题：">
            <p size="small">{{formInitData.gdInfoEntityList[0].title}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="内容：">
            <p size="small">{{formInitData.gdInfoEntityList[0].content}}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 市长信箱-电话工单\信件工单\信箱工单 -->
    <div class="gdxx-div"
         v-if="showQyffDiv">
      <div class="repeat-div"
           v-for="item in formInitData.gdInfoEntityList"
           :key="item.code">
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="工单编号：">
              <p size="small"
                 disabled>{{item.code}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="来电(信)人：">
              <p size="small"
                 disabled>{{item.income}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="联系人电话：">
              <p size="small"
                 disabled>{{item.telphone}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系人邮箱：">
              <p size="small">{{item.email}}</p>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="系统来源：">
            <p size="small">{{formInitData.sourceName}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="主题：">
            <p size="small">{{formInitData.gdInfoEntityList[0].title}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="内容：">
            <p size="small"
               class="p-qiye-content"
               v-html="formInitData.gdInfoEntityList[0].content"></p>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 市人社局信箱 -->
    <div class="gdxx-div"
         v-if="showSrsjDiv">
      <div class="repeat-div"
           v-for="item in formInitData.gdInfoEntityList"
           :key="item.code">
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="工单编号：">
              <p size="small"
                 disabled>{{item.code}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="来电(信)人：">
              <p size="small"
                 disabled>{{item.income}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="联系人电话：">
              <p size="small"
                 disabled>{{item.telphone}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系人邮箱：">
              <p size="small">{{item.email}}</p>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="系统来源：">
            <p size="small">{{formInitData.sourceName}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="主题：">
            <p size="small">{{formInitData.gdInfoEntityList[0].title}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="内容：">
            <p size="small"
               class="p-qiye-content"
               v-html="formInitData.gdInfoEntityList[0].content"></p>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 人民网信访 -->
    <div class="gdxx-div"
         v-if="showRmwDiv">
      <div class="repeat-div"
           v-for="item in formInitData.gdInfoEntityList"
           :key="item.code">
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="工单编号：">
              <p size="small"
                 disabled>{{item.code}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="来电(信)人：">
              <p size="small"
                 disabled>{{item.income}}</p>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10"
                  :offset="1">
            <el-form-item label="联系人电话：">
              <p size="small"
                 disabled>{{item.telphone}}</p>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="联系人邮箱：">
              <p size="small">{{item.email}}</p>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="系统来源：">
            <p size="small">{{formInitData.sourceName}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="主题：">
            <p size="small">{{formInitData.gdInfoEntityList[0].title}}</p>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="内容：">
            <p size="small"
               class="p-qiye-content"
               v-html="formInitData.gdInfoEntityList[0].content"></p>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 工单附件 -->
    <div class="gdxx-div"
         v-if="showFileDiv">
      <p class="cl-title">工单文件</p>
      <el-row class="gdxx-file">
        <el-col :span="20"
                :offset="1">
          <el-form-item label="文件：">
            <a href="javascript:void(0)">{{formInitData.fileEntity.fileName}}</a>
            <span class="file-btn"
                  @click="filePreview">查看</span>
            <span class="file-btn"
                  @click="fileDownload">下载</span>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 流程信息 -->
    <div class="gdxx-div"
         v-if="showLcxxDiv">
      <p class="cl-title">流程信息</p>
      <el-row v-for="item in formInitData.gdHisEntityList"
              :key="item.wllzid">
        <el-col :span="20"
                :offset="1">
          <el-form-item label="流程：">
            <p size="small">({{item.deptName}}){{item.empName}} 在 {{item.replyTime}} {{item.replyState}}： {{item.replyDescription}}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <!-- 处理信息 -->
    <div class="gdxx-div"
         v-if="showClxxDiv">
      <p class="cl-title">处理信息</p>
      <el-row>
        <el-col :span="5"
                :offset="1">
          <el-form-item label="紧急件：">
            <el-switch active-color="red"
                       inactive-color="lightgray"
                       v-model="formInitData.isImportant"
                       disabled></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="工单类别：">
            <el-input size="small"
                      :disabled="true"
                      :value="formInitData.cateName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="处理人：">
            <el-input size="small"
                      :disabled="true"
                      :value="formInitData.empName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="处理时限：">
            <el-input size="small"
                      :disabled="true"
                      :value="formInitData.limitTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="5"
                :offset="1">
          <el-form-item label="紧急件：">
            <el-switch active-color="red"
                       inactive-color="lightgray"
                       v-model="formInitData.isImportant"
                       disabled></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="工单类别：">
            <p size="small">{{formInitData.cateName}}</p>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="处理人：">
            <p size="small">{{formInitData.empName}}</p>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="处理时限：">
            <p size="small">{{formInitData.limitTime}}</p>
          </el-form-item>
        </el-col>
      </el-row> -->
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="备注：">
            <p size="small">{{formInitData.gdInfoEntityList[0].remark ? formInitData.gdInfoEntityList[0].remark : '无'}}</p>
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <div class="gdxx-div sure-btn-div"
         v-if="showClxxDiv">
      <p class="cl-title">回复信息</p>
      <el-row v-if="chooseme==='JCZLHSHSYJ.SHBXSYGLC' || chooseme==='JCZLHSHSYJ.YBC'">
        <el-col :span="20"
                :offset="1">
          <el-form-item label="短信回复：">
            <el-switch active-color="red"
                       inactive-color="lightgray"
                       v-model="formDataItem.smsSwitch"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20"
                :offset="1">
          <el-form-item label="回复内容：">
            <el-input v-model="formDataItem.description"
                      type="textarea"
                      rows="12"
                      resize="none"
                      size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="rmw-file-div"
           v-if="showRmwFileDiv">
        <el-row>
          <el-col :span="20"
                  :offset="1">
            <el-form-item label="支撑材料：">
              <p style="color: red; font-size: 16px;">**人民网工单必须提交word电子版与红头领导签字盖章纸质版**</p>
              <el-upload class="upload-demo"
                         drag
                         multiple
                         :action="uploadPath"
                         :file-list="fileDataList"
                         :limit="limitNumer"
                         :on-preview="rmwFilePreview"
                         :on-success="handleSuccess"
                         :on-error="handleError"
                         :on-exceed="handleExceed">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或
                  <em>点击上传</em>
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="btn-div"
         v-if="showClxxDiv">
      <el-button type="primary"
                 @click="proxyFn('formDataItem')"
                 :loading="loadingProxy">确认</el-button>
      <el-button @click="backFn">返回</el-button>
    </div>
  </el-form>
</template>

<script>
  import { getUserInfo } from '@/utils/sessionStorage' // session管理
  export default {
    name: 'send-detail',
    props: ['lcid'],
    data () {
      return {
        chooseme: getUserInfo().deptBm,
        // 文件上传地址
        limitNumer: 1,
        uploadPath: this.$api.common.uploadFile,
        fileDataList: [],
        filePojo: {
          fileName: '',
          filePath: ''
        },
        // 表单数据
        formInitData: {
          sourceName: '',
          isImportant: false,
          isUnsatisfy: false,
          limitTime: '',
          cateName: '',
          empName: '',
          fileEntity: {
            fileName: '',
            filePath: ''
          },
          gdHisEntityList: [
            {
              deptName: '',
              empName: '',
              replyState: '',
              replyTime: '',
              replyDescription: ''
            }
          ],
          gdInfoEntityList: [
            {
              code: '',
              income: '',
              telphone: '',
              email: ''
            }
          ]
        },
        // 保存数据
        formDataItem: {
          wllzid: '',
          sourceId: '',
          description: '',
          smsSwitch: 'false',
          fileEntity: {
            fileName: '',
            filePath: ''
          }
        },
        // div显示隐藏
        showGzxxDiv: false,
        showDldDiv: false,
        showSzxxDiv: false,
        showQyffDiv: false,
        showSrsjDiv: false,
        showRmwDiv: false,
        showFileDiv: false,
        showLcxxDiv: false,
        showClxxDiv: false,
        showHfxxDiv: false,
        showThxxDiv: false,
        showBlxxDiv: false,
        showRmwFileDiv: false,
        // 加载
        loadingPage: false,
        loadingProxy: false
      }
    },
    created: function () {
      this.detailFn()
      console.log(1111122, this.chooseme)
    },

    methods: {
      // 工单信息
      detailFn: function () {
        const _this = this
        // 请求，解析内容
        _this.loadingPage = true
        this.$axios.get(_this.$api.staff.sendInfo + '/' + _this.lcid).then(rs => {
          if (rs) {
            _this.formInitData = Object.assign(_this.formInitData, rs)
            _this.formInitData.limitTime = this.formatLimitDate(rs)
            _this.formDataItem.wllzid = rs.wllzid
            _this.formDataItem.sourceId = rs.sourceId
            console.log(_this.formInitData)
            // 判断工单文件
            if (rs.document === 1) {
              _this.showFileDiv = true
            }

            // 判断来源系统
            if (rs.sourceId == 12306) {
              _this.showSrsjDiv = true
            } else if (rs.sourceId == 12388) {
              _this.showRmwDiv = true
              _this.showRmwFileDiv = true
            } else if (rs.sourceId == 10086) {
              _this.showGzxxDiv = true
            } else if (rs.sourceId == 10010) {
              _this.showDldDiv = true
            } else if (rs.sourceId == 10000) {
              _this.showSzxxDiv = true
            } else if (rs.sourceId == 12580) {
              _this.showQyffDiv = true
            }

            // 流程信息
            if (rs.gdHisEntityList) {
              _this.showLcxxDiv = true
            }
            // 判断处理状态
            if (rs.handleState === 5) {
              _this.showThxxDiv = true
              _this.showHfxxDiv = true
            } else if (rs.handleState === 4) {
              _this.showBlxxDiv = true
              _this.showHfxxDiv = true
            }
            _this.showClxxDiv = true
            _this.loadingPage = false
          } else {
            _this.loadingPage = false
          }
        })
      },
      // 格式化日期
      formatLimitDate: function (data) {
        const _this = this
        var date = data.limitTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日')
      },
      // 文件预览
      filePreview () {
        let fileUrl = this.formInitData.fileEntity.filePath
        this.$previewFile(fileUrl)
      },
      // 文件下载
      fileDownload () {
        let fileUrl = this.formInitData.fileEntity.filePath
        let fileName = this.formInitData.fileEntity.fileName
        this.$downloadFile(fileUrl, fileName)
      },
      // 支撑材料预览
      rmwFilePreview (file) {
        this.$previewFile(file.url)
      },
      handleSuccess (res, file, fileList) {
        // console.log(res);
        if (res.code === 0) {
          this.fileDataList = []
          let result = res.data
          let fileInfo = {}
          fileInfo.name = result.fileName
          fileInfo.url = result.filePath
          fileInfo.type = result.fileType
          fileInfo.filePreview = result.filePreview
          this.fileDataList.push(fileInfo)
          // console.log(this.fileDataList);
        } else {
          this.$message.error('哦豁，文件上传失败请重试...')
          // fileList.splice(fileList.indexOf(file), 1)
        }
      },
      handleError (err, file, fileList) { },
      handleExceed () {
        this.$message.error('只需要一个文件就够了，别再点了...')
      },
      // 代办
      proxyFn: function () {
        const _this = this
        if (_this.formDataItem.description.length === 0) {
          _this.$message({ message: '请输入工单回复内容...', showClose: true, type: 'warning' })
          return
        }
        if (_this.formDataItem.sourceId == 12388) {
          if (_this.fileDataList.length === 0) {
            _this.$message({ message: '人民网工单必须提交word电子版...', showClose: true, type: 'warning' })
            return
          }
          // 文件数据对象
          let fileInfo = _this.fileDataList[0]
          _this.filePojo.fileName = fileInfo.name
          _this.filePojo.filePath = fileInfo.url
          _this.formDataItem.fileEntity = _this.filePojo
          // 确认提示
          _this.$confirm('请确认"红头领导签字盖章纸质版"是否已提交？', '提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
            .then(() => {
              // 请求，代办工单
              _this.loadingPage = true
              _this.loadingProxy = true
              this.$axios.post(_this.$api.staff.proxy, _this.formDataItem).then(rs => {
                if (rs) {
                  _this.$message({ message: '工单已办理...', showClose: true, type: 'success' })
                  _this.loadingPage = false
                  _this.loadingProxy = false
                  _this.backFn()
                } else {
                  _this.$message.error('工单办理失败，请联系及时技术人员...')
                  _this.loadingPage = false
                  _this.loadingProxy = false
                }
              })
            })
            .catch(() => {
              return false
            })
        } else {
          // 请求，代办工单
          _this.loadingPage = true
          _this.loadingProxy = true
          this.$axios.post(_this.$api.staff.proxy, _this.formDataItem).then(rs => {
            if (rs) {
              _this.$message({ message: '工单已办理...', showClose: true, type: 'success' })
              _this.loadingPage = false
              _this.loadingProxy = false
              _this.backFn()
            } else {
              _this.$message.error('工单办理失败，请联系及时技术人员...')
              _this.loadingPage = false
              _this.loadingProxy = false
            }
          })
        }
      },
      // 返回
      backFn: function () {
        this.$emit('dialogSendCloseFn')
        this.$emit('getSendPage')
      }
    }
  }
</script>
